<template>
  <div class="detail-wraper">
      <div class="header">
        <p class="title">退货/换货/退款</p>
        <p class="time">创建时间: {{resData.create_time}}</p>
      </div>
      <div class="detail" v-for="(item, index) in items" :key="index">
            <div class="pic">
              <img :src="item.pic_url" alt="" />
            </div>
            <div class="goods-info">
              <p class="title">{{item.item_title}}</p>
              <p class="price">￥ <span>{{item.current_price}}</span></p>
            </div>
            <div class="goods-num">
              <p>X {{item.num}}</p>
            </div>
      </div>
      <div class="physical-info" @click="physicalDetail">
        <div class="local">
          <img src="https://img.wifenxiao.com/h5-wfx/images/order/adreess_log.png"  alt="">
        </div>
        <div class="physical-text" v-if="isLogistics">
          <p>{{LogisticsFirstData.status }}</p>
          <p>{{LogisticsFirstData.time}}</p>
        </div>
        <div v-else class="no-info">暂无物流信息</div>
        <div class="arrow-right">
          <img src="https://img.wifenxiao.com/h5-wfx/images/arrow_R.png" alt="">
        </div>
      </div>
      
      <div class="consensus">
        <div class="title">
         <span class="icon"></span>
         <span class="consensus-text">协商信息</span>
        </div>
        <div class="consensus-info">
          <div class="consensus-wraper">
            <p class="text">原订单号:</p>
            <p class="info-value">{{resData.order_no}}</p>
          </div>
          <div class="consensus-wraper">
            <p class="text">收货人:</p>
            <p class="info-value">{{resData.receiver_name}} {{resData.receiver_mobile}}</p>
          </div>
          <div class="consensus-wraper" v-if="resData.payment">
            <p class="text">订单金额:</p>
            <p class="info-value">{{resData.payment}}</p>
          </div>
         <div class="consensus-wraper" v-if="resData.refund_type ==2">
            <p class="text">退款金额:</p>
            <p class="info-value">{{resData.total_fee}}</p>
          </div>
         <div class="consensus-wraper">
            <p  class="text">{{resData.refund_type ==1?'退款原因':resData.c_type==2?'退货原因':'换货原因'}}:</p>
            <p class="info-value">{{resData.reason}}</p>
          </div>
          <div class="consensus-wraper">
            <p  class="text">{{resData.refund_type ==1?'退款编号':resData.c_type==2?'退货编号':'换货编号'}}:</p>
            <p class="info-value">{{resData.complain_order_no}}</p>
          </div>
        </div>
      </div>
      <div class="sh-box" v-if="resData.is_drop_shipping== '1' ">
          <p class="agree" @click="sh(resData.order_id,resData.complain_order_id,1)">同意</p>
          <p class="refuse" @click="sh(resData.order_id,resData.complain_order_id,2)">拒绝</p>
        </div> 
  </div>
</template>

<script>
import Vue from 'vue'
import { hangComplainDetail, handleComplainOrder } from '@/api/dz/dzApi.js'
import { getExpressInfo } from '@/api/order/order.js'
import small from '@/smallapp/small'

export default Vue.extend ({
  data() {
    return {
      resData: {},
      items: [],
      isLogistics: false, // 是否有物流信息
      LogisticsFirstData: {},
      order_id: '',
      complain_order_id: ''
    }
  },
  created() {
    const { order_id, complain_order_id } = this.$route.query
    this.order_id = order_id
    this.complain_order_id = complain_order_id
    hangComplainDetail({ order_id, complain_order_id }).then(res => {
      if (res.status) {
        if (res.data.data) {
          this.resData = res.data.data
          this.items = res.data.data.item
        }
      }
    })
    getExpressInfo({ type: 1, id: order_id }).then(res => {
      if (res.status == '0') {
        this.isLogistics = false
      } else {
        let list = []
        if (Array.isArray(res.data.result.list)) {
          this.isLogistics = true
          list = res.data.result.list
          this.LogisticsFirstData = list.shift()
        }
      }
    })
  },
  methods: {
    sh(order, complain, audit) {
      const order_id = order
      const complain_order_id = complain
      const is_audit = audit
      const data = { order_id, complain_order_id, is_audit }
      handleComplainOrder(data).then(res => {
        if (res.status == 1) {
          this.$Error(res.msg)
          this.refresh()
          this.init()

        } else {
          this.$Error(res.msg)
        }
      })
    },
    physicalDetail() {
        this.$JumpName(this, 'physicalDetail', { order_id: this.order_id })
    },
    init() {
      const { order_id, complain_order_id } = this
      hangComplainDetail({ order_id, complain_order_id }).then(res => {
      if (res.status) {
        if (res.data.data) {
          this.resData = res.data.data
          this.items = res.data.data.item
        }
      }
    }),
    getExpressInfo({ type: 1, id: order_id }).then(res => {
      if (res.status == '0') {
        this.isLogistics = false
      } else {
        let list = []
        if (Array.isArray(res.data.result.list)) {
          this.isLogistics = true
          list = res.data.result.list
          this.LogisticsFirstData = list.shift()
        }
      }
    })
  }
}
})
</script>

<style lang="scss">
.detail-wraper {
  .header {
    width: 100%;
    height: 200px;
    padding: 45px;
    background: url("https://img.wifenxiao.com/h5-wfx/images/ltns-detail-header.png") top left no-repeat;
    background-size: 100% 100%;
    .title {
      font-size: 36px;
      color: #fff;
    }
    .time {
      font-size: 24px;
      margin-top: 20px;
      color: rgba($color: #000000, $alpha: 0.5);
    }
    
  }
  .detail {
    display: flex;
    justify-content: space-between;
    background: #fff;
    margin: -4px;
    border-radius: 20px;
    padding: 30px;
    .pic {
      img {
        border-radius: 15px;
        width: 100px;
        height: 100px;
      }
    }
    .goods-info {
      flex: 2;
      margin-left: 20px;
      line-height: 50px;
      .title {
        font-size: 24px;
        color: #343434;
        line-height: 50px;
      }
      .price {
        font-size: 36px;

      }
    }
  }
  .physical-info {
    padding: 30px;
    background: #fff;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:30px;
    .local {
      background: #fff;
      img {
        width: 40px;
        height: 40px;
      }
    }
    .physical-text {
      flex: 2;
      margin-left: 30px;
    }

  }
  .consensus {
    padding: 30px;
    background: #fff;
    margin-top: 30px;
    border-radius: 30px;
    .title {
      .icon {
        display: inline-block;
        width: 10px;
        height: 40px;
        background: red;
        vertical-align: text-bottom;
        margin-right: 10px;
      }
      .consensus-text {
        font-size: 36px;
        font-weight: bold;
        color: #343434;
      }
    }
  }
  .consensus-info {
    .consensus-wraper {
      display: flex;
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 30px;
      .text {
       margin-left: 30px;
       text-align: left;
        width: 200px;
      }
    }
  }
  .sh-box{
      display: flex;
      justify-content: center;
      background: #fff; 
      padding-bottom: 10px;
      margin-top: 30px;
    .agree {
      background: #fff;
      color: crimson;
      border: 1px solid crimson;
      border-radius: 80px;
      font-size: 30px;
      padding: 10px 20px;
      margin: 0  20px;
      align-items: center;
      margin-top:10px;
    }
    .refuse {
      background: #fff;
      color: #717171;
      border: 1px solid #717171;
      border-radius: 80px;
      font-size: 30px;
      padding: 10px 20px;
      align-items: center;
      margin: 0  20px;
      margin-top:10px;
    }
  }
  .no-info {
    font-size: 30px;
    background: #fff;
    border-radius: 30px;
    text-align: center;
    height: 50px;
    line-height: 50px;
  }
}
</style>
